<template>
	<view class="styledetailview2">
		<title :title="detailview2.title"></title>
		<!-- <view @longpress="deleteitem(index3)" v-if="item3.state!='delete'" v-for="(item3, index3) in detailview2.rows" :key="index3" class="view2-content"> -->
		<view v-if="item3.state!='delete'" v-for="(item3, index3) in detailview2.rows" :key="index3" class="view2-content">
		   <view  class="content-detail">
				<view class="detail">
					<view v-for="(item2,index2) in item3.contentdetail1.inputdetail" :key="index2">
						<view v-if="item2.coltype=='date' && item2.visible" :style="{'background-color':!item2.editable?'#fff':'#f8f8f8'}" style="padding:13px 0px;color: #666;font-size: 14px; display: flex;flex-direction: row;justify-content: space-between;">
							<view style="display: flex;align-items: center;">{{item2.coltext}} <view v-if="item2.isnotnull" style="color: #F55C23;font-size: 6px;" class="iconfont icon-jiufuqianbaoicon14"></view> </view>
							<view style="text-align: left;width: 60vw;"> 
								<picker  :mode="item2.coltype" :disabled="!item2.editable" :value="item2.colvalue" :start="item2.starts" :end="item2.ends" @change="bindDateChange(index3,index2,$event)">
									<view class="uni-input" style="color: #aaa;">{{item2.coldisplay==''?'请选择':item2.coldisplay}}</view>
								</picker> 
							</view>
						</view>
						<textdigit v-if="(item2.coltype=='text' || item2.coltype=='digit' || item2.coltype=='number') && item2.visible" :texttype="texttype" :dataobj="item2" :index2="index2" :index3="index3" @changeData="changeData(arguments)"></textdigit>
						<stylelist v-if="item2.coltype=='list' && item2.visible" ref="stylelist" :dataList="dataList" :dataobj="item2"  :index2="index2" :index3="index3" :typeindex="typeindex" :styletype="styletype" :modcode="modcode" @changeData="changeData(arguments)"></stylelist>
						<stylelayer v-if="item2.coltype=='layer' && item2.visible" :dataobj="item2" :index2="index2" :index3="index3" @changeData="changeData(arguments)"></stylelayer>
					</view>
				</view>
			</view>
			<view class="split"></view>
			<view class="bottom-icons" v-if="(detailview2.addrow.state=='update' || detailview2.addrow.state=='insert') && itemcount>0">
				<text class="iconfont icon-jia" @click="additem"></text> 
				<text class="iconfont icon-jianqu" :class="{'showlast': (JSON.stringify(detailview2.rows)=='[]' || itemcount==0)}" @click="minusitem(index3)"></text>
			</view>
		</view>
		
		<view class="bottom-icons" v-if="(detailview2.addrow.state=='update' || detailview2.addrow.state=='insert') && itemcount==0">
			<text class="iconfont icon-jia" @click="additem"></text> 
		</view>
	</view>
</template>


<script>
	import title from "../title/title.vue"
	import textdigit from "../textdigit/textdigit.vue"
	import stylelist from "../stylelist/stylelist.vue"
	import stylelayer from "../stylelayer/stylelayer.vue"
	export default{
		components:{
			title:title,
			textdigit:textdigit,
			stylelist:stylelist,
			stylelayer:stylelayer
		},
		props:{
			detailview2:{
				type:Object
			},
			dataList:{
				type:Array,
				default () {
					return []
				}
			},
			index:{
				type:Number
			},
			typeindex:{
				type:Number
			},
			styletype:{
				type:String
			},
			modcode:{
				type:String
			}
		},
		
		data(){
			return{
				texttype:'addminus',
				itemcount:1
			}
		},
		
		mounted:function(){
			var that = this
			if(JSON.stringify(that.detailview2.rows)=='[]'){
				that.detailview2.rows.push(JSON.parse(JSON.stringify(this.detailview2.addrow)))
			}
			if(that.detailview2.addrow.state=='update' || that.detailview2.addrow.state=='insert'){
				var rows = that.detailview2.rows
				for(var j=0;j<rows.length;j++){
					var inputdetail = rows[j].contentdetail1.inputdetail
					if(JSON.stringify(inputdetail)!='[]'){
						var listindex = 0
						for(var i=0;i<inputdetail.length;i++){
							if(inputdetail[i].coltype=='list'){
								inputdetail[i]['typeindex'] = listindex
								listindex++
							}
						}
					}
					rows[j].contentdetail1.inputdetail = inputdetail
				}
				that.detailview2.rows = rows
				var rowinputdetail = that.detailview2.addrow.contentdetail1.inputdetail
				if(JSON.stringify(rowinputdetail)!='[]'){
					var listindex = 0
					var layerindex = 0
					for(var i=0;i<rowinputdetail.length;i++){
						if(rowinputdetail[i].coltype=='list'){
							rowinputdetail[i]['typeindex'] = listindex
							listindex++
						}else if(rowinputdetail[i].coltype=='layer'){
							rowinputdetail[i]['typeindex'] = layerindex
							layerindex++
						}
					}
				}
				that.detailview2.addrow.contentdetail1.inputdetail = rowinputdetail
				that.$emit('changeListData',that.index,that.detailview2)
			}
		},
		
		methods:{
			changeData(args){
				var that = this
				this.detailview2.rows[args[0]].contentdetail1.inputdetail[args[1]] = args[2]
				this.$emit('changeListData',that.index,that.detailview2)
			},
			
			bindDateChange(index,index2,event){
				var that = this
				this.detailview2.rows[index].contentdetail1.inputdetail[index2].colvalue = event.detail.value
				this.detailview2.rows[index].contentdetail1.inputdetail[index2].coldisplay = event.detail.value
				this.$emit('changeListData',that.index,that.detailview2)
			},
			
			updatelistvalue(content){
				var that = this
				that.$refs.stylelist[content.typeindex2].updatelistvalue(content)
			},
			
			minusitem(index){
				// this.detailview2.rows.splice(-1,1)
				var that = this
				uni.showModal({
					title:"提示",
					content:"是否删除这行记录?",
					success:function(res){
						if(res.confirm){
				var rows = that.detailview2.rows
				if(JSON.stringify(rows)!='[]'){
					var deletecount = 0
					for(var i=0;i<rows.length;i++){
						if(rows[i].state=='delete'){
							deletecount += 1
						}
					}
					// var index = rows.length - deletecount - 1
					
					var state = rows[index].state
					if(state=='update'){
						rows[index].state = 'delete'
						that.itemcount = rows.length - deletecount - 1
					}
					if(state == 'insert'){
						rows.splice(-1,index)
						that.itemcount = rows.length - deletecount
					}
				}
				
				that.detailview2.rows = rows
				that.$emit('changeListData',that.index,that.detailview2)
				}
					}
				})
			},
			
			// deleteitem(index3){
			// 	var that = this
			// 	if(this.detailview2.rows.length==1){
			// 		return
			// 	}
			// 	uni.showModal({
			// 		title:"提示",
			// 		content:"是否删除这行记录?",
			// 		success:function(res){
			// 			if(res.confirm){
			// 				that.detailview2.rows.splice(index3,1)
			// 				that.$emit('changeListData',that.index,that.detailview2)
			// 			}
			// 		}
			// 	})
			// },
			
			additem(){
				var count = this.detailview2.rows.length - 1
				var item = JSON.parse(JSON.stringify(this.detailview2.rows[count].contentdetail1.inputdetail)) 
				for(var i=0;i<item.length;i++){
					if(item[i].coltype=='layer'){
						this.detailview2.addrow.contentdetail1.inputdetail[i] = item[i]
					}
				}
				this.itemcount = 1
				this.detailview2.rows.push(JSON.parse(JSON.stringify(this.detailview2.addrow))) 
				this.$emit('changeListData',this.index,this.detailview2)
			}
			
		}
	}
</script>

<style scoped>
	.styledetailview2 .view2-content{display: flex;flex-direction: column;}
	.styledetailview2 .view2-content .content-detail{display: flex;flex-direction: row;align-items: center;margin: 5px 0px;}
	.styledetailview2 .view2-content .content-detail .detail{display: flex;flex-direction: column;width: calc(100vw - 20px);}
	.styledetailview2 .bottom-icons{display: flex;flex-direction: row;}
	.styledetailview2 .bottom-icons .iconfont.icon-jia,.iconfont.icon-jianqu{margin: 5px 0;font-size: 18px;padding: 1px; border-radius: 50%;border:1px solid #D8D8D8;color: #D8D8D8;}
	.styledetailview2 .bottom-icons .iconfont.icon-jianqu{margin-left: 30px;}
	.styledetailview2 .bottom-icons .iconfont.icon-jianqu.showlast{visibility: hidden;}
	.styledetailview2 .view2-content .split{margin-bottom: -1px; width: 100%;border-bottom: #f0f0f0 1px solid;}
</style>
